<template>
  <div class="recycle-root">
    <h2>回收站</h2>
    <div v-if="recycleBin.length === 0" class="empty">回收站为空</div>
    <ul v-else>
      <li v-for="(file, idx) in recycleBin" :key="file.name">
        <img src="/src/assets/home/huishou.png" class="icon" />
        <span>{{ file.name }}</span>
        <span class="from">（来自：{{ file.from }}）</span>
        <button @click="restore(idx)">还原</button>
      </li>
    </ul>
    <button v-if="recycleBin.length" class="clear-btn" @click="clearBin">清空回收站</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { fileSystem } from '../../../core/desktopData'

const recycleBin = ref([...fileSystem.recycleBin])
function restore(idx) {
  alert('已还原：' + recycleBin.value[idx].name)
  recycleBin.value.splice(idx, 1)
}
function clearBin() {
  if (confirm('确定要清空回收站吗？')) {
    recycleBin.value = []
    alert('回收站已清空')
  }
}
</script>
<style scoped>
.recycle-root { padding: 16px; font-family: 'Segoe UI', system-ui, sans-serif; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.icon { width: 28px; height: 28px; }
.from { color: #888; font-size: 12px; margin-left: 8px; }
button { margin-left: 16px; background: #eaf1fb; border: none; border-radius: 4px; padding: 4px 12px; cursor: pointer; transition: background 0.2s; }
button:hover { background: #d2e6fa; }
.clear-btn { margin-top: 16px; background: #e81123; color: #fff; }
.empty { color: #888; padding: 32px 0; text-align: center; }
</style> 